<template>
  <svg-icon 
    :title="fullscreen ? '退出全屏' : '全屏'" 
    :svg-name="fullscreen ? 'exit-fullscreen' : 'fullscreen'" 
    @myclick="handleFullScreen"
  />
</template>

<script>
import screenfull from 'screenfull'
import SvgIcon from '@/components/SvgIcon';

export default {
  name: 'Screenfull',
  data() {
    return {
      fullscreen: false
    }
  },
  components: {
    SvgIcon
  },
  methods: {
    // 触发-全屏-事件
    handleFullScreen(){
      let element = document.documentElement;
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    }
  }
}
</script>

<style lang="less" scoped>
  
</style>
